<template>
  <div>
    <div class="header">
      <a @click="backMethod">
        <i class="el-icon-arrow-left" style="font-size: 20px; color:white;margin-right: 20px;">返回</i>
      </a>
      <h3 style="color: white;">我的订单</h3>
    </div>
    <div style="margin-top: 80px;">
      <div class="orderList" v-for="orderitem in orderList" :key="orderitem.orderNo">
        <div class="orderItem">
          <div class="orderInfo">
            <span style="display: inline-block;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;">订单号:{{orderitem.orderNo}}</span>
            <span style="width: 70%;text-align: right;">
              订单状态:
              <el-tag size="mini" :type="orderitem.orderStatus==0?'warning':
                                         orderitem.orderStatus==1?'success':
                                         orderitem.orderStatus==2?'info':'danger'">
              {{orderitem.orderStatus==0?' 待付款':
                orderitem.orderStatus==1?' 已付款 ':
                orderitem.orderStatus==2?' 已取消 ':'状态异常'}}</el-tag>
            </span>
          </div>
          <div class="goodslist" v-for="goodsItem in orderitem.goodsList" :key="goodsItem.orderId">
            <div class="goodsItem">
              <!-- {{goodsItem.goods.}} -->
              <img :src="goodsItem.goods.goodsImg"/>
              <div style="display: flex;justify-content: space-between;flex: 1;margin: 0 15px;">
                <div style="display: flex;flex-direction: column;text-align: left;">
                  <b>{{goodsItem.goods.goodsName}}</b>
                  <span style="color: #888888;margin-top: 8px;">规格:{{goodsItem.goods.specification}} 个/g/份</span>
                  <span style="color: #888888;width: 100%;">单价:￥{{goodsItem.goods.price}}.00</span>
                </div>
                <div style="display: flex;flex-direction: column;">
                  <b>￥{{goodsItem.sumPrice}}.00</b>
                  <span style="color: #888888;margin-top: 8px;">x{{goodsItem.goodsNum}}</span>
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex;box-sizing: border-box;padding: 10px 20px;justify-content: space-between;">
            <el-button type="primary" size="mini" :disabled="(orderitem.orderStatus==0)?false:true" @click="payOrder(orderitem)">
              {{orderitem.orderStatus==0?' 待付款 ':
                orderitem.orderStatus==1?' 已付款 ':
                orderitem.orderStatus==2?' 已取消 ':'状态异常'}}
            </el-button>
            <div style="display: flex;">
              <span style="margin-right: 20px;display: block;">共 {{orderitem.goodsNum}} 件商品</span>
              <span style="display: block;">合计:{{orderitem.goodsSum}}.00</span>
            </div>
          </div>
          <el-collapse class="consignee">
            <el-collapse-item title="收货地址">
              <div style="display: flex;align-items:baseline;justify-content: space-between;">
                <h2 style="font-size: 16px;text-align: left;">收货人姓名:{{orderitem.consignee.consigneeName}}</h2>
                <span style="height: 100%;color: #d5d3d4;">收货人电话:{{orderitem.consignee.phoneNum}}</span>
              </div>
              <p style="font-size: 18px;text-align: left;">{{orderitem.consignee.address}}</p>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return{
        //需要查询的用户的账号
        userCode:"",
        //订单列表
        orderList:[],

        activeNames: ['1']
      }
    },
    mounted() {
      //渲染数据
      this.queryMyOrderList()
    },
    methods:{
      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        if(lastPage!=null){
          this.$router.push({
            path: lastPage
          });
        }{
          this.$router.push({
            path: '/home/mine'
          });
        }
      },

      //查询我的所有订单
      queryMyOrderList(){
        var self = this
        var user = JSON.parse(sessionStorage.getItem("visitor"));
        this.$http.get(`/api`+'/CakeShop/OrderManage/queryMyOrderList?userCode='+`${user.userCode}`)
        .then(res=>{
          // console.log(res.data)
          // console.log(res.data.orderList)
          if(res.data.code == 200){
            self.orderList = res.data.orderList
          }
        })
      },
      //为未付款的订单付款
      payOrder(orderitem){
        console.log(orderitem)
        this.$http.get('/api/CakeShop/payOrder?orderSn='+orderitem.orderNo)
        .then((res)=>{
          if(res.data.code == 200){
            console.log(res)
            // AlipaySdk.exec()
            const div = document.createElement('div')
            div.innerHTML = res.data.aliPayUrl
            console.log(res.data.aliPayUrl)
            document.body.appendChild(div)
            document.forms[0].submit()
          }
        })
      },
    }
  }
</script>

<style scoped>
  .header{
    display: flex;
    width: 100%;
    padding-left: 30px;
    height: 80px !important;
    line-height: 80px;
    background-color: #732707;
    position: fixed;
    top: 0;
  }

  .orderList{
    display: flex;
    flex-direction: column;
  }
  .orderList .orderItem{
    display: flex;
    flex-direction: column;
    margin: 10px 25px 0;
    border-radius: 5px;
    border: 1px solid #EBEEF5;
  }
  .orderList .orderItem .orderInfo{
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;
    border-bottom: 1px solid #EBEEF5;
  }
  .orderList .orderItem .goodslist{
    margin: 10px 15px;
  }
  .orderList .orderItem .goodslist .goodsItem{
    display: flex;
    height: 80px;
  }
  .orderList .orderItem .consignee{
    box-sizing: border-box;
    padding: 0 20px;
  }
</style>
